<template>
  <div>
    <HomeNavelist :data="data.booklist" />
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { getBooks } from "@/api/data";
import HomeNavelist from "@/components/home/HomeNavelist";
export default {
  components: {
    HomeNavelist,
  },
  setup() {
    const route = useRoute();
    const id = ref(0);
    const data = reactive({
      booklist: null,
    });
    id.value = route.params.id;

    // 只有第一次渲染才会触发
    onMounted(async () => {
      // console.log("onMounted")
      // console.log(id.value)
      if (id.value >= 8) {

        return;
      }
      let data1 = await getBooks(
        {
          num: 1,
          pageSize: 6,
        },
        id.value
      );
      // console.log(data1)
      if (data1.code == 200) {
        data.booklist = data1.data;
      }
    });

    // 切换路由时触发，这时候还在前一个路由里面，第一次渲染不会触发
    onBeforeRouteUpdate(async (val) => {
      id.value = val.params.id;
      if (id.value >= 0 && id.value < 8) {
        let data1 = await getBooks(
          {
            num: 1,
            pageSize: 6,
          },
          id.value
        );
        data.booklist = data1.data;
      }
    });

    return {
      id,
      data,
    };
  },
};
</script>

<style>
</style>